<template>
  <div ref="chartRef" style="width:100%;height:100%"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref()
let chart
let resizeTimer = null

const handleResize = () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    if (chart) {
      chart.clear()
      chart.resize()
      chart.setOption(getChartOption())
    }
  }, 300)
}

const getChartOption = () => ({
  title: { text: '销量对比', textStyle: { color: '#00eaff' } },
  tooltip: {},
  xAxis: { data: ['A','B','C','D','E'], axisLine:{ lineStyle:{color:'#00eaff'} } },
  yAxis: { axisLine:{ lineStyle:{color:'#00eaff'} } },
  series: [{ type: 'bar', data: [5, 20, 36, 10, 10], itemStyle:{ color:'#00eaff' } }]
})

onMounted(() => {
  chart = echarts.init(chartRef.value)
  chart.setOption(getChartOption())
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  clearTimeout(resizeTimer)
  chart?.dispose()
})
</script>